<template>
	<view>
		<Header title="钱包" :PreventCollapse="true" fontSize="36rpx" color="#202020" :fanhui="true" />
		<view class="main">
			<view class="card">
				<view class="cardTop">
					<view class="cardItem">
						<view class="money_label">
							<span>总资产（元）</span>
							<view @click="activeEyes" :class="eyeActive?'eyeNo':'eyeYes'"></view>
						</view>
						<view class="money">
							{{showMoney}}
						</view>

					</view>
					<view class="withdrawal" v-if="isshow==0">
						<span class="text" @click="gotoNav(0)">去提现</span>
						<view class="iconfont icon-jiantou2"></view>
					</view>
				</view>
				<view class="Divider"></view>
				<view class="incomeBox">
					<view class="text">
						今日收入：{{data.payment==null?'0':data.payment}}
					</view>
					<view class="text">
						已提现金额：{{data.withdrawal==null?'0':data.withdrawal}}
					</view>
				</view>
			</view>
			<view class="tabsBox">
				<u-tabs class="tabs" lineHeight="6rpx" :list="list" @click="changeTabs" :scrollable="false"
					lineColor="#00A0E9" :current="current" :activeStyle="{
				    color: '#00A0E9',fontSize:'30rpx'}" :inactiveStyle="{
				    color: '#666666',fontSize:'30rpx'}"></u-tabs>
			</view>
		</view>
		<swiper class="swiper" :current="current" @change="currentChange" :circular="false" :duration="300">
			<swiper-item>
				<scroll-view @scrolltolower='scrolltolower' scroll-y="true" class="content">
					<view class="contentItem" v-for="(item,i) in incomeVos" :key="item.driverBillId">
						<view class="pic"></view>
						<view class="itemInfo">
							<span class="tit">运费</span>
							<span class="text">{{item.createDate}}</span>
						</view>
						<view class="price">
							<span class="text">+{{item.amount}}</span>
							<i class="iconfont icon-jiantou2"></i>
						</view>
					</view>
				
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<view class="content">
					<view class="contentItem" v-for="item in recordsVos" :key="item.driverWithdrawalId">
						<view class="pic2"></view>
						<view class="itemInfo">
							<span class="tit">单号-{{item.transSeqNo}}</span>
							<span class="text">{{item.createDate}}</span>
						</view>
						<view class="price">
							<span class="text">-{{item.amount}}</span>
							<i class="iconfont icon-jiantou2"></i>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	import Header from '@/components/header/header.vue'
	export default {
		data() {
			return {
				eyeActive: false,
				current: 0,
				money: '', //总资产
				showMoney: '*****',
				list: [{
					name: '订单收入',
				}, {
					name: '提现记录',
				}],
				incomeVos: [], //	订单收入
				recordsVos: [], // 	提现记录
				toDaysIncome: "", //今日收入
				accumulatedIncome: "",
				data: {

				},
				pageIndex: 1,
				isshow:0
			}
		},
		
		methods: {
			scrolltolower(){
				this.pageIndex++
				this.queryPageType()
			},
			async cread() {

				let res = await this.$http.users.queryWalletIndexDetail();
				if (res.data.code == 200) {
					this.data = res.data.data
					this.money = res.data.data.amount
				}else{
					this.isshow=1;
				}
			},
			async queryPageType() {
				let businessType
				if (this.current == 1) {
					businessType = 92
				} else {
					businessType = 91
				}
				var d = {
					pageIndex: this.pageIndex,
					pageSize: 10,
					isSuccess: 1,
					businessType: businessType
				}
				let res = await this.$http.users.queryPageWalletIndex(d);
				let data = res.data.data.data.resultList;
				if(data.length==0){
					uni.showToast({
						title:'暂无数据',
						icon:'none'
					})
					return false
				}
				data.forEach((item, i) => {
					let time = item.createDate * 1
					item.createDate = this.formatting(time)
				})
				if(this.pageIndex==0){
					this.incomeVos = JSON.parse(JSON.stringify(data))
					this.recordsVos = JSON.parse(JSON.stringify(data))
				}else{
						this.incomeVos=this.incomeVos.concat(JSON.parse(JSON.stringify(data)))
						this.recordsVos=this.recordsVos.concat(JSON.parse(JSON.stringify(data)))
				}
			},
			//时间转换
			formatting(e) {
				var time = new Date(e);
				var y = time.getFullYear();
				var m = time.getMonth() + 1;
				var d = time.getDate();
				var h = time.getHours();
				var mm = time.getMinutes();
				var s = time.getSeconds();
				return y + '-' + m + '-' + d + ' ' + h + ':' + mm +
					':' + s
			},
			currentChange(e) {
				// 用户触摸滑动切换时,更新data中的current
				this.current = e.detail.current
				this.pageIndex= 1
				this.queryPageType()
			},
			gotoNav(e) {
				let url = ''
				switch (e) {
					// 去提现
					case 0:
						url = '/subPackages/subWallet/withdrawal';
						break;
				}
				uni.navigateTo({
					url
				})
			},
			changeTabs(item) {
				this.current = item.index
				this.recordsVos=[]
			},
			activeEyes() {
				this.eyeActive = !this.eyeActive
				if (this.eyeActive) {
					this.showMoney = this.money
				} else {
					this.showMoney = '*****'
				}
			}
		},
		onShow() {
			this.cread();
			this.queryPageType();
		},
		components: {
			Header
		},


	}
</script>

<style lang="scss" scoped>
	.main {
		display: flex;
		flex-direction: column;
		background-color: #fff;



		.tabsBox {
			.tabs {
				width: 750rpx;
				height: 88rpx;
			}
		}

		.card {
			background-image: url('../../../static/carType/cardBg2@2x.png');
			background-size: cover;
			height: 280rpx;
			width: 690rpx;
			margin: 20rpx auto;

			.cardTop {
				height: 198rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.cardItem {
					margin-left: 54rpx;

					.money {
						font-size: 50rpx;
						color: #fff;
						font-weight: bold;
					}

					.money_label {
						color: #CDCDCD;
						font-size: 24rpx;
						display: flex;
						align-items: center;

						.eyeYes {

							width: 29rpx;
							height: 23rpx;
							background-image: url('@/static/carType/kejian.png');
							background-size: cover;
						}

						.eyeNo {

							width: 29rpx;
							height: 23rpx;
							background-image: url('@/static/carType/noKeJian.png');
							background-size: cover;
						}
					}
				}

				.withdrawal {
					width: 142rpx;
					height: 60rpx;
					background-image: url('@/static/carType/roundedRectangle@2x.png');
					background-size: cover;
					display: flex;
					align-items: center;
					justify-content: center;

					.text {
						color: #3A5074;
						font-size: 24rpx;
						margin: 18rpx 5rpx 19rpx 32rpx
					}

					.icon-jiantou2 {
						color: #3A5074;
						font-weight: bold;
						line-height: 60rpx;
						font-size: 24rpx;
					}
				}

			}

			.Divider {
				height: 1rpx;
				background-color: #636C83;
				margin: 0 50rpx;
			}

			.incomeBox {
				display: flex;
				padding-left: 53rpx;
				margin-top: 22rpx;

				.text {
					color: #CDCDCD;
					font-size: 24rpx;

					&:nth-child(1) {
						margin-right: 65rpx;
					}
				}
			}
		}
	}

	.swiper {
		width: 100%;

		height: calc(100vh - 510rpx);
		box-sizing: border-box;

		.content {
			width: 750rpx;
			padding: 30rpx;
			height: calc(100vh - 600rpx);

			.contentItem {
				height: 150rpx;
				width: 690rpx;
				display: flex;
				background-color: #fff;
				margin-bottom: 24rpx;
				padding: 0 40rpx;
				align-items: center;
				box-sizing: border-box;


				.pic {
					width: 47rpx;
					height: 52rpx;
					background-image: url('@/static/carType/qianbao2.png');
					background-size: cover;
					margin-right: 30rpx;


				}

				.pic2 {
					width: 48rpx;
					height: 53rpx;
					background-image: url('@/static/carType/qian3.png');
					background-size: contain;
					background-repeat: no-repeat;
					margin-right: 27rpx;
				}


				.itemInfo {
					display: flex;
					flex-direction: column;

					.tit {
						color: #202020;
						font-size: 28rpx;
						font-weight: bold;
						margin-bottom: 8rpx;
					}

					.text {
						color: #777777;
						font-size: 26rpx;
					}
				}

				.price {
					height: 40rpx;
					display: flex;
					align-items: center;
					margin-left: auto;

					.text {
						color: #202020;
						font-size: 36rpx;
						font-weight: bold;
						margin-right: 14rpx;
					}

					.icon-jiantou2 {
						font-size: 22rpx;
						font-weight: bold;
						color: #666666;
					}
				}
			}
		}
	}
</style>